<template>
	<view class="contanier">
		<view v-if="isUser">
			<view class="title">
				<view class="title-view">
					样本照片:
					<image src="../../static/up-cloud-icon.png" mode="aspectFit" style="width: 100rpx;" @click="toMessageUp()"></image>
				</view>
				<view class="title-phone">
					<view class="up-phone" v-for="(item,index) in 2">
						<view v-if="!upPhoto" class="show" @click="upImage">
							<u-icon name="plus" color="#000000" size="15" class="i"></u-icon>
							<text>点击上传图片</text>
						</view>
						<image :src="basePhoto[index]" mode="aspectFit" v-if="upPhoto" @click="upImage"></image>
						<view class="del-photo" @click="delPhoto(index)" v-if="basePhoto.length>=2">
							<u-icon name="close-circle"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<table class="up-insect-table table">
				<thead class="up-insect-table-tr">
					<tr>
						<td class="td-date">
							<view class="td-date-body">
								<text>日期:</text><input class="form-control form-date" type="text" v-model="GreenLand.date"
									@click="show=true">
								<u-datetime-picker :show="show" v-model="fromDate" mode="date" @confirm="showDate"
									:closeOnClickOverlay="true" @close="show=false" @cancel="show=false">
								</u-datetime-picker>
							</view>
						</td>
						<td class="td-date-right">
							<view class="td-date-body">
								<text>网络编号:</text>
								<input class="form-control form-date-right" type="text" v-model="GreenLand.interNum"
									placeholder="2022050201">
							</view>
						</td>
					</tr>
				</thead>
				<view class="split">
					<view class="color"> &nbsp;</view>绿地信息
				</view>
				<tr>
					<td>1.绿地名称
						<u-input border="bottom" clearable v-model="GreenLand.name"></u-input>
					</td>
					<td>2.绿地等级
						<u-input border="bottom" clearable v-model="GreenLand.grade">
							<template slot="suffix">
								级
							</template>
						</u-input>
					</td>
				</tr>
				<tr>
					<td>3.绿地面积
						<u-input border="bottom" clearable v-model="GreenLand.area">
							<template slot="suffix">
								<view>m<sup>2</sup></view>
							</template>
						</u-input>
					</td>
					<td>4.绿地受害程度
						<u-input border="bottom" clearable v-model="GreenLand.sufferInjuryLevel">
							<template slot="suffix">
								%
							</template>
						</u-input>
					</td>
				</tr>
				<view class="split">
					<view class="color"> &nbsp;</view>受灾信息
				</view>
				<tr>
					<td>5.受灾植物类型
						<u-input border="bottom" clearable 
						placeholder="乔木类/香樟" v-model="sufferInjuries.name"
						></u-input>
					</td>
					<td>6.植物健康水平
						<u-input border="bottom" clearable v-model="sufferInjuries.healthy">
							<template slot="suffix">
								<view>%</view>
							</template>
						</u-input>
					</td>
				</tr>
				<tr>
					<td>7.病虫灾害、数量、种类
					<!-- pests.name+pests.type+pests.number -->
						<button type="primary" class="click-btn" @click="showPests=true">点击弹窗</button>
						<umodal :show="showPests" @cancel="cancelPests" @close="cancelPests" @confirm="confirmPests" :arrayList="pestsList"></umodal>
					</td>
					<td>8.受灾面积
						<u-input border="bottom" clearable v-model="sufferInjuries.area">
							<template slot="suffix">
								<view>m<sup>2</sup></view>
							</template>
						</u-input>
					</td>
				</tr>
				<tr>
					<td>9.病毒名称及发生规模
						<!-- virus.name+virus.number -->
						<button type="primary" class="click-btn" @click="showVirus=true">点击弹窗</button>
						<umodal :show="showVirus" @cancel="cancelVirus" @close="cancelVirus" @confirm="confirmVirus" :arrayList="virusList"></umodal>
					</td>
				</tr>
				<view class="split">
					<view class="color"> &nbsp;</view>人员信息
				</view>
				<tr>
					<td>10.检测人员姓名
						<u-input border="bottom" clearable v-model="greenLandMonitorPeople.name"></u-input>
					</td>
					<td>11.联系电话
						<u-input border="bottom" type="number" clearable v-model="greenLandMonitorPeople.number"></u-input>
					</td>
				</tr>
			</table>
			<button type="button" class="up-insect-btn" @click="update()">上传</button>
		</view>
		<view v-if="!isUser">
			<unLogin></unLogin>
		</view>
	</view>

</template>

<script>
	import {
		chooseImage,
		previewImage
	} from "@/common/utils/chooseImage.js" //上传图片以及后续读取封装
	import umodal from "@/components/modal/umodal.vue"
	import unLogin from "@/components/unLogin.vue"
	import { pathToBase64, base64ToPath } from '@/node_modules/image-tools/index.js'
	export default {
		data() {
			return {
				upPhoto: false,
				basePhoto: [],
				show: false,
				showVirus:false,
				showPests:false,
				fromDate: Number(new Date()),
				GreenLand:{
					// 绿地名称
					name:'',
					// 绿地等级
					grade:'',
					// 绿地面积
					area:'',
					// 绿地受害程度
					sufferInjuryLevel:'',
					// 日期
					date:'',
					// 网络编号
					interNum:''
				},
				// 受灾信息
				sufferInjuries:{
					// 受灾植物类型
					name:'',
					// 植物健康水平
					healthy:'',
					// 受灾面积
					area:''
				},
				virus:{
					// 病毒名称
					name:'',
					// 数量
					number:'',
				},
				pests:{
					// 病虫名称
					name:'',
					// 病虫类型
					type:'',
					// 病虫数量
					number:''
				},
				greenLandMonitorPeople:{
					// 检测人员名称
					name:'',
					// 检测人员联系电话
					number:''
				},
				greenLandPhotos:[],
				// 传到后端服务器的Base64数组  没有jpeg前缀
				upbase64:[],
				//传入模态框的数组
				virusList:[
					{name:'病毒名称',value:""},
					{name:'病毒规模(数量)',value:"",suffix:"只",inputType:"number"},
				],
				pestsList:[
					{name:'病虫名称',value:""},
					{name:'病虫种类',value:""},
					{name:'病虫规模(数量)',value:"",suffix:"只",inputType:"number"},
				],
				user:[],
				isUser:false
			}
		},
		components:{umodal,unLogin},
		onShow() {
			if(this.$storage.get("user") != []){
				this.user= JSON.parse( this.$storage.get("user"))
				this.greenLandMonitorPeople.name=this.user.userName
				this.greenLandMonitorPeople.number=this.user.phone
				this.isUser=true
				// console.log(this.user)
			}
			if(this.$storage.get("photoDis") != []){
				let photoDis =this.$storage.get("photoDis")
				photoDis.forEach(item=>{
					this.pestsList[0].value+=item+","
				})
				// console.log(this.$storage.get("photoDis"))
			}
			// console.log(this.user)
			// this.showUpMessage()
		},
		onLoad(options) {
			
		},
		methods: {
			upImage() {
				if (this.basePhoto.length >= 2) {
					this.$utils.errorMsg("最多添加两张照片")
					return
				}
				chooseImage().then(response => {
					pathToBase64(response.tempFilePaths[0])
					  .then(base64 => {
							this.upPhoto = true
							this.basePhoto.push(base64)
							this.upbase64.push(base64.slice(23,-1))
					  })
					  .catch(error => {
					    console.error(error)
					  })
				})
				
			},
			delPhoto(index) {
				this.basePhoto.splice(index, 1)
				this.upbase64.splice(index, 1)
			},
			// 日期以及网络编号生成
			showDate(aadate) {
				const timeFormat = uni.$u.timeFormat
				this.GreenLand.date = timeFormat(aadate.value, 'yyyy-mm-dd')
				let dataFromat
				if(this.user.greenLands.length < 10){
					dataFromat = 'yyyymmdd0'+this.user.greenLands.length
				}else{
					dataFromat = 'yyyymmdd'+this.user.greenLands.length
				}
				this.GreenLand.interNum=timeFormat(aadate.value, dataFromat)
				this.show = false
			},
			showUpMessage(){
				this.$http.httpGet('greenLand/findGreenLandById/1','').then(response=>{
					console.log(response)
				})
			},
			update(){
				if(! this.ValidateByGreenLand()){
					console.log("要先填写绿地信息")
					return
				}if(! this.Validate()){
					console.log("要先填写信息")
					return
				}
				this.GreenLand.sufferInjuries=[this.sufferInjuries]
				this.GreenLand.greenLandMonitorPeople=[this.greenLandMonitorPeople]
				this.upGreenLandImage().then(sucess=>{
					setTimeout(()=>{
					this.GreenLand.greenLandPhotos=JSON.parse(JSON.stringify(this.greenLandPhotos))
					this.user.greenLands.push(this.GreenLand)
					this.$http.httpPost('greenLand/save',this.user).then(response=>{
						// 写入storage缓存
						this.$storage.setJson("user",this.user)
						this.$utils.sucessMsg(response.data.data)
						//这里延时的目的是给提示框展示的时间
						setTimeout(()=>{
							this.$utils.reLaunch('../reLaunch/reLaunch?id=upInsect','')
						},800)
					})
					},800)
				})
			},
			upGreenLandImage(){
				return new Promise((resolve,rejcect)=>{
					this.upbase64.forEach((base64,index)=>{
						this.$http.httpPost('photo/upGreenLandImage/'+this.GreenLand.name+index+'.jpg',base64).then(response=>{
						let url = response.data.data.slice(7)
						this.greenLandPhotos.push({photoUrl:url})
						// console.log(url)
						resolve(url)
						}).catch(error=>{
							rejcect()
						})
					})
				})
			},
			cancelVirus(data){
				this.showVirus=data
			},
			confirmVirus(data){
				this.showVirus=data[1]
				this.virus.name=data[0][0].value
				this.virus.number=data[0][1].value
				this.sufferInjuries.virus=[this.virus]
			},
			cancelPests(data){
				this.showPests=data
			},
			confirmPests(data){
				this.showPests=data[1]
				this.pests.name=data[0][0].value
				this.pests.type=data[0][1].value
				this.pests.number=data[0][2].value
				this.sufferInjuries.pests=[this.pests]
				console.log(this.sufferInjuries)
			},
			Validate(){
				if(! this.ValidateBySufferInjuries()){
					console.log("受灾信息没有填写")
					return false
				}
				if(this.greenLandMonitorPeople.name==''){
					this.$utils.errorMsg("检测人员信息没填写")
					return false
				}if(this.greenLandMonitorPeople.number==''){
					this.$utils.errorMsg("检测人员手机号没填写")
					return false
				}
				return true
				// console.log(this.greenLandMonitorPeople) 
			},
			ValidateBySufferInjuries(){
				if(this.sufferInjuries.name==''){
					this.$utils.errorMsg("受灾植物类型不能为空")
					return false
				}
				if(this.sufferInjuries.healthy==''){
					this.$utils.errorMsg("受灾健康水平不能为空")
					return false
				}if(this.sufferInjuries.area==''){
					this.$utils.errorMsg("受灾健康水平不能为空")
					return false
				}
				if(this.sufferInjuries.area==''){
					this.$utils.errorMsg("受灾健康水平不能为空")
					return false
				}if(this.sufferInjuries.pests==null){
					this.$utils.errorMsg("病虫信息不能为空")
					return false
				}if(this.sufferInjuries.virus==null){
					this.$utils.errorMsg("病毒信息不能为空")
					return false
				}
				return true
			},
			ValidateByGreenLand(){
				if(this.GreenLand.name==''){
					this.$utils.errorMsg("绿地名称不能为空")
					return false
				}
				if(this.GreenLand.grade==''){
					this.$utils.errorMsg("绿地等级不能为空")
					return false
				}
				if(this.GreenLand.area==''){
					this.$utils.errorMsg("绿地面积不能为空")
					return false
				}if(this.GreenLand.date==''){
					this.$utils.errorMsg("日期不能为空")
					return false
				}if(this.GreenLand.interNum==''){
					this.$utils.errorMsg("网络编号不能为空")
					return false
				}
				if(this.GreenLand.sufferInjuryLevel==''){
					this.$utils.errorMsg("绿地受害程度不能为空")
					return false
				}
				return true
			},
			clarnData(){
				this.GreenLand=[]
				this.basePhoto=[]
				this.upbase64=[]
			},
			toMessageUp(){
				this.$utils.navigateTo("messageUp/messageUp",'')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "upInsect.scss";
	.aaa{
		color: #13c2c2;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>
